/* robot-mission.css */

/* 主容器样式 */
.robot-mission {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 360px;
    flex-shrink: 0;
}

/* 状态栏样式 */
.status-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #666;
}

.status-indicator i {
    width: 1rem;
    height: 1rem;
}

.battery-indicator i {
    color: #4096ff;
}

.state-indicator i {
    color: #52c41a;
}

/* 模块通用样式 */
.mission-module {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.mission-module:last-child {
    border-bottom: none;
}

/* 优化模块标题和按钮组布局 */
.mission-module {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mission-title {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    min-width: 2.5rem; /* 确保标题有固定宽度 */
    margin: 0; /* 移除之前的底部间距 */
}

/* 按钮组样式 */
.mission-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    flex: 1; /* 让按钮组占据剩余空间 */
}

/* 按钮基础样式 */
.mission-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s;
    cursor: pointer;
    min-height: 4px;
    width: 65px;
    font-size: 4px;
    font-weight: 500;
}

.mission-btn:hover {
    background-color: #f5f5f5;
}

.mission-btn.active {
    background-color: #e6f4ff;
    border-color: #4096ff;
}

.mission-btn i {
    width: 1rem;
    height: 1rem;
}

/* 不同按钮组的图标颜色 */
.mission-module:nth-child(2) .mission-btn i {
    color: #4096ff; /* 任务按钮图标颜色 */
}

.mission-module:nth-child(3) .mission-btn i {
    color: #722ed1; /* 模式按钮图标颜色 */
}

.mission-module:nth-child(4) .mission-btn i {
    color: #faad14; /* 快捷按钮图标颜色 */
}

.mission-btn span {
    font-size: 0.875rem;
    color: #666;
}